<!--
 * @Author: zhoujieyu zhoujieyu_web@163.com
 * @Date: 2024-08-20 09:21:05
 * @LastEditors: zhoujieyu zhoujieyu_web@163.com
 * @LastEditTime: 2024-08-29 10:37:47
 * @FilePath: \2024-DTS培训-二三维标签添加\code\场景漫游.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>场景漫游</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
    <script type="text/javascript" src="./lib/ElementPlus/index.js"></script>
    <link rel="stylesheet" href="./lib/ElementPlus/index.css" />
  </head>
  <body>
    <div id="dom">
      <div id="player"></div>

      <div class="btn-list">
        <div onclick="SetCoordinate()" class="btn">相机定位</div>
        <el-dropdown placement="bottom" @command="ReportModeClick">
          <div class="btn">汇报模式</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="enter">进入汇报模式</el-dropdown-item>
              <el-dropdown-item command="exit">退出汇报模式</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown placement="bottom" @command="EarthLocationClick">
          <div class="btn">地球-指定位置</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="earth">地球视角</el-dropdown-item>
              <el-dropdown-item command="enter">定位</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown placement="bottom" @command="InteractionClick">
          <div class="btn">交互</div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in interaction"
                :key="item.index"
                :command="item.name"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div onclick="PlayAnimation()" class="btn">自定义导览</div>
      </div>
      <div id="Animation" v-if="animationActive">
        <div class="container animate__animated animate__fadeInRight">
          <div
            class="list"
            v-for="(item, index) in AnimationList.data"
            :key="index"
            @click="playAnimation(item)"
          >
            <div class="imgbase">
              <img :src="'data:image/png;base64,'+ item.image" alt="" />
            </div>
            <div class="title">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      const { createApp, computed, ref } = Vue
      // 控制导览列表的显示隐藏
      let animationActive = ref(false)
      // 导览列表
      const AnimationList = ref([])
      // 交互模式
      let interaction = ref([
        {
          index: 0,
          name: '漫游'
        },
        {
          index: 1,
          name: '中心漫游'
        },
        {
          index: 2,
          name: '人物'
        },
        {
          index: 3,
          name: '无人机'
        },
        {
          index: 4,
          name: '地图模式'
        },
        {
          index: 5,
          name: '隐藏操作杆'
        }
      ])
      /**
       * 相机定位
       */
      const SetCoordinate = () => {
        // 1. 移动到想要的视角使用fdapi.camera.get() -> 获取当前的视角参数
        // 2. 复制获取的视角参数数组
        // 3. 利用fdapi.camera.set()，将先前复制的参数数组填入，实现精确的视角设置
        fdapi.camera.set([
          8175.809785, 4707.930625, 175.176094, -35.538998, -165.996994, 2
        ])
        // Parameters参数分别表示：x 坐标X、y 坐标Y、z 坐标Z、pitch 上下旋转角度、yaw 左右旋转角度、flyTime 相机飞行时间，默认2s
      }
      /**
       * 地球 -> 指定位置
       */
      const EarthLocationClick = command => {
        switch (command) {
          case 'earth':
            // 视角设置为地球
            fdapi.camera.exitWorld()
            break
          case 'enter':
            fdapi.camera.set(
              8153.066321,
              4691.370703,
              138.548633,
              -36.705048,
              -165.670059,
              2
            )
            break
          default:
            fdapi.camera.set(
              8153.066321,
              4691.370703,
              138.548633,
              -36.705048,
              -165.670059,
              2
            )
            break
        }
      }

      /**
       * 汇报模式选择
       */
      const ReportModeClick = command => {
        switch (command) {
          // 进入汇报模式
          case 'enter':
            // 导览设置
            fdapi.settingsPanel.setReportMode(1, 0, false)
            // 进入汇报模式
            fdapi.misc.enterReportMode()

            break
          // 退出汇报模式
          case 'exit':
            // 退出汇报模式
            fdapi.misc.exitReportMode()
            // 隐藏主界面UI
            fdapi.settings.setMainUIVisibility(false)

            break
          default:
            break
        }
      }

      /**
       * 交互模式选择
       */
      const InteractionClick = async command => {
        switch (command) {
          // 交互模式设置为漫游模式
          case '漫游':
            fdapi.settings.setInteractiveMode(0) // 0：自由交互模式
            break
          // 交互模式设置为人物漫游模式
          case '人物':
            fdapi.settings.setInteractiveMode(1) // 1：人物模式
            fdapi.settings.setCharacterRoaming(
              [8124.68, 4729.3121875, 3.12004150390625],
              [-20, 8, 0],
              10
            )
            break
          // 交互模式设置无人机模式
          case '无人机':
            fdapi.settings.setInteractiveMode(2) // 2：无人机模式
            break
          // 交互模式设置中心漫游模式
          case '中心漫游':
            fdapi.settings.setInteractiveMode(3) // 3：中心漫游模式（物体观察模式）
            break
          // 交互模式设置地图模式
          case '地图模式':
            fdapi.settings.setInteractiveMode(4) // 4：地图模式
            break
          case '隐藏操作杆':
            let modeActive = await fdapi.settings.getInteractiveMode() // 获取当前交互模式
            if (modeActive.type == 1 || modeActive.type == 2) {
              fdapi.settings.setScreenControlsVisible(false) // 隐藏操作杆
            }
            break
          default:
            fdapi.settings.setInteractiveMode(0) // 0：自由交互模式

            break
        }
      }

      /**
       * 导览
       */
      const PlayAnimation = async () => {
        animationActive.value = true

        // 1、获取导览列表
        AnimationList.value = await fdapi.camera.getAnimationList()

        // 2、获取导览缩略图
        for (let index = 0; index < AnimationList.value.data.length; index++) {
          const element = AnimationList.value.data[index]
          const image = await fdapi.camera.getAnimationImage(element.name) // 获取图片
          element.image = image.image
        }

        // 设置导览播放相关参数
        // Parameters参数：
        // showAlign-汇报演示窗口位置 取值：0【底部】，1【居左】，2【居右】，默认0
        // playMode-播放模式 取值： 0【单体播放】，1【单体循环】，2【整体循环】，默认0
        // isLinkage-多视口相机是否联动 取值：联动true，不联动false，默认不联动false
        fdapi.settingsPanel.setReportMode(0, 0, false)
      }

      const playAnimation = val => {
        //参数：导览序号
        fdapi.camera.playAnimation(val.id)
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset()
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)
          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          return {
            animationActive,
            AnimationList,
            playAnimation,
            ReportModeClick,
            interaction,
            InteractionClick,
            EarthLocationClick
          }
        }
      })
      app.use(ElementPlus).mount('#dom')

      /**
       * 页面离开事件(离开时清除此页面的操作及重置场景)
       */
      window.onunload = function (e) {
        // 重置场景
        fdapi.reset()
      }
    </script>
  </body>
</html>
